import { observer } from 'mobx-react-lite';
import { useStoreContext } from '../../context';

const Filters = ["All", "Active", "Completed"];

function Footer() {
  const { todosStore } = useStoreContext();
  const { filter, uncompletedCount, changeFilter, clearCompleted } = todosStore;
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{uncompletedCount}</strong> item left
      </span>
      <ul className="filters">
        {Filters.map(item => (
          <li key={item}>
            <button className={filter === item ? 'selected' : ''} onClick={() => changeFilter(item)}>{item}</button>
          </li>
        ))}
      </ul>
      <button className="clear-completed" onClick={clearCompleted}>
        Clear completed
      </button>
    </footer>
  )
}

export default observer(Footer);
